<script setup lang="ts">
import {onBeforeMount, ref, watch} from "vue";
import {useRoute} from "vue-router";
import _ from "lodash";
import {message} from "ant-design-vue";
import {
  createFromIconfontCN,
  UserAddOutlined,
  LikeOutlined,
  FolderOpenOutlined,
  SettingOutlined
} from "@ant-design/icons-vue";
import {iconFontAddress, PagePath} from "@/util/commonUtil";
import {router} from "@/router";

const route = useRoute()
const noticeType = ref<any>('')
// 引入阿里图标库
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
})

onBeforeMount(() => {
  noticeType.value = route.query.noticeType as string || undefined
  if (_.isUndefined(noticeType.value)) {
    message.error('传递通知类型有误')
    return
  }

})

watch(() => route.query.noticeType, (newVal) => {
  noticeType.value = newVal
})

function changeTab(e: any) {
  switch (e) {
    case '1': {
      noticeType.value = '1'
    }
      break
    case '2': {
      noticeType.value = '2'
    }
      break
    case '3': {
      noticeType.value = '3'
    }
      break
    case '4': {
      noticeType.value = '4'
    }
      break
    case '5': {
      noticeType.value = '5'
    }
      break
  }
  router.push({path: PagePath.Notice, query: {noticeType: noticeType.value}})
}
</script>

<template>
  <section class="websiteNotice max-w-screen-xl w-full m-auto mt-4">
    <a-tabs tabPosition="left" v-model:activeKey="noticeType" @change="changeTab">
      <a-tab-pane key="1">
        <template #tab>
          <IconFont type="icon-pinglun" class="text-base"/>
          <span>评论</span>
        </template>
        <div>评论通知</div>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <UserAddOutlined class="text-base"/>
          <span>关注</span>
        </template>
        <div>关注通知</div>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #tab>
          <LikeOutlined class="text-base"/>
          <span>点赞</span>
        </template>
        <div>点赞通知</div>
      </a-tab-pane>
      <a-tab-pane key="4">
        <template #tab>
          <FolderOpenOutlined class="text-base"/>
          <span>收藏</span>
        </template>
        <div>收藏通知</div>
      </a-tab-pane>
      <a-tab-pane key="5">
        <template #tab>
          <SettingOutlined class="text-base"/>
          <span>系统</span>
        </template>
        <div>系统通知</div>
      </a-tab-pane>
    </a-tabs>
  </section>
</template>

<style scoped lang="less">

</style>
